在不同 runtime 上執行的 JavaScript

第 12 屆 iThome 鐵人賽

DAY 8

Modern Web

網頁技術學習心得系列第 8 篇

12th鐵人賽

rock070

團隊路上撿組員

2020-09-23 18:34:03

4240 瀏覽

分享至

本篇介紹 JavaScript 在不同的執行環境 (runtime) 上執行的差別。

JavaScipt 是程式語言

首先，
我們要知道，JavaScipt 是程式語言，是用來定義電腦程式的形式語言。它是一種被標準化的交流技巧，是工程師用來向電腦發出指令的。

Node.js、瀏覽器是執行環境(runtime)

執行環境就是讓你的程式語言執行的一個軟體。

JavaScript 內建的 Library 有限，我們使用的很多 API 都是執行環境提供的，且不同的執行環境有不同的執行方式。

以下舉例：

兩個 runtime 都有提供的 API

例如：
request:

在 node.js 裡面，可以下載 npm 裡面的套件，例如 request 。
在瀏覽器裡面，可以使用瀏覽器環境準備的 new XMLHttprequest class By MDN Web Docs。
所以我在 node.js 裡面就無法使用 new XMLHttprequest，在瀏覽器裡面無法使用 request 套件。

console.log()：
這個 API 不是 JS 原生的，之所以可以在瀏覽器與 Node.js 上執行，是因為剛好兩個執行環境都剛好有提供這個 API。

只有瀏覽器提供的 API

document 這個 API 是由瀏覽器提供，Node.js 不支援。

假設使用 document.querySelector('.c')，到 Node.js 環境上執行的話，會出現錯誤訊息：

ReferenceError: document is not defined

瀏覽器執行順序是由上到下

runtime 在跑程式碼的時候是由上到下去解讀，所以當我在 script 裡使用 document API 去抓 .box3 的 class 物件的時候，他無法抓到，會出現錯誤，以下程式碼與錯誤訊息，因為 JavaScript 是出現在 HTML 之前的，瀏覽器無法透過 JavaScript 抓到後面才會渲染的 HTML 內容：

<!DOCTYPE html>

<html>
  <head>
    <script>
      document.querySelector('.box3')
              .addEventListener('click',function() {
                document.querySelector('.box3').style.background = 'black';
                  }   
                )
    </script>
    <style>
        .box1 {
          background-color: yellow;
          width: 100px;
          height: 100px;
        }
        .box2 {
          background-color: red;
          width: 70px;
          height: 70px;
        }
        .box3 {
          background-color:blue;
          width: 30px;
          height: 30px;
        }
    </style>
  </head>
  <body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </body>
</html>

錯誤訊息：

Uncaught TypeError: Cannot read property 'addEventListener' of null
    at test.htm:8

解決

我們必須要在環境設定時，幫 document 加上一個addEventListener('DOMContentLoaded',function(){})的方法，代表監聽當 body 的部分被瀏覽器渲染了之後，document 物件才開始可以執行 function 內的內容，就不用擔心瀏覽器會抓不到 body 內物件了。

範例程式碼：

 document.addEventListener('DOMContentLoaded',function(){
  document.querySelector('.box3').addEventListener('click',function(){
    document.querySelector('.box3').style.background ='black'
    }   
 )
})

成功！